import * as NaiveUI from 'naive-ui';
import { computed } from 'vue';

/**
 * 挂载 Naive-ui 脱离上下文的 API
 * 如果你想在 setup 外使用 useDialog、useMessage、useNotification、useLoadingBar，可以通过 createDiscreteApi 来构建对应的 API。
 * https://www.naiveui.com/zh-CN/dark/components/discrete
 */

export function setupNaiveDiscreteApi() {
  const configProviderPropsRef = computed(() => ({
    themeOverrides: {
        common: {
            primaryColor: '3e66fa',
            primaryColorHover: '3e66fa',
        },
        LoadingBar: {
            colorLoading: '3e66fa',
        },
    },
  }));
  const { message, dialog, notification, loadingBar } = NaiveUI.createDiscreteApi(
    ['message', 'dialog', 'notification', 'loadingBar'],
    {
      configProviderProps: configProviderPropsRef,
    }
  );

  window['$message'] = message;
  window['$dialog'] = dialog;
  window['$notification'] = notification;
  window['$loading'] = loadingBar;
}

// 自定义Naive-ui组件主题样式
export const setThemeOverrides = {
  common: {
    primaryColor: '#194bfb',
    infoColor: '#194bfb'
  },
  Button: {
    colorFocusInfo: '#194bfb',
    colorHoverInfo: '#194bfb',
    borderRadiusMedium: '4px'
  },
  Input: {
    loadingColor: '#194bfb',
    border: '1px solid #D0D2D7',
    borderFocus: '1px solid #194bfb',
    borderHover: '1px solid #194bfb',
    borderRadius: '6px'
  },
  Tag: {
    heightMedium: '24px',
    borderRadius: '3px',
    borderWarning: '1px solid #FF9600',
    colorBorderedWarning: '#fffaf2',
    textColorWarning: '#FF9600',
    borderInfo: '1px solid #0063FF',
    colorBorderedInfo: 'rgba(0,99,255,0.05)',
    textColorInfo: '#0063FF',
  },
  Alert: {
    borderWarning: '1px solid #FF9600',
    colorWarning: 'rgba(255,150,0,0.05)'
  },
  Divider: {
    color: '#DCDEE0'
  }
};
